<template>
  <div class="box">
    <h1>computed计算属性</h1>
    <p>姓：<input type="text" v-model="user.x" /></p>
    <p>名：<input type="text" v-model="user.m" /></p>
    <p>姓名：<input type="text" v-model="user.xm" /></p>
  </div>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    let user = reactive({
      x: "胡",
      m: "世凯",
    });

    //计算属性方式一：只有获取结果
    // user.xm = computed(() => {
    //   return user.x + user.m;
    // });

    // 计算属性方式二：要获取结果，也要影响到原始数据
    user.xm = computed({
        get(){
            return user.x +"-"+ user.m;
        },
        set(val){
            // console.log(val.split("-")); //获取到计算结果  ['胡', '世凯1']
            // user.x = val.split("-")[0]
            // user.m = val.split("-")[1]

            [user.x,user.m] = val.split("-"); //数组的解构赋值
        }
    })

    return {
      user,
    };
  },
};
</script>

<style>
</style>